import {defineComponent, ref} from "vue";
import "./css/index.css"
import {userStore} from "@/stores/user";
import {ElMessageBox} from "element-plus";
import {removeToken} from "@/utils/auth";
import {useRoute} from "vue-router";
import router from "@/router";
export default defineComponent({
    setup : () => {
        const title = ref(import.meta.env.VITE_TITLE)
        const activeIndex = ref(useRoute().path)


        //选择菜单
        const handleSelect = (index) => {
            activeIndex.value = index
        }

        //推出登陆
        const exitLogin = () => {
            ElMessageBox.confirm("真的要退出登陆吗?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    removeToken()
                    location.href = '/login';
                })
        }

        const user_store = userStore()
        const {user} = user_store


        const routerLinkTo = (path) => {
            router.push(path)
        }
        return () => {
            const slots = {
                title: () => {
                    return user.nick_name
                }
            }
            return <>
                <div className="title11">{title.value}</div>
                <div className="menu-box">
                   <div className="menu">
                       <el-menu
                           default-active={activeIndex.value}
                           mode="horizontal"
                           background-color={"#649894"}
                           text-color={"#fff"}
                           active-text-color={"#FFBA52"}
                           ellipsis={false}
                           onSelect={(index) => {
                               handleSelect(index)
                           }}
                       >
                           <el-menu-item onclick={() => {
                               routerLinkTo("/home")
                           }} index={"/home"}>首页
                           </el-menu-item>
                           <el-menu-item onclick={() => {
                               routerLinkTo("/notice")
                           }} index={"/notice"}>站内公告
                           </el-menu-item>
                           <el-menu-item onclick={() => {
                               routerLinkTo("/information")
                           }} index={"/information"}>众筹资讯
                           </el-menu-item>
                           <el-menu-item onclick={() => {
                               routerLinkTo("/initiate")
                           }} index={"/initiate"}>发起众筹
                           </el-menu-item>
                           <el-menu-item onclick={() => {
                               routerLinkTo("/category")
                           }} index={"/category"}>众筹项目
                           </el-menu-item>
                           <div className="flex-grow"/>
                           <el-sub-menu
                               popper-class={'my'}
                               v-slots={slots}
                               popper-offset={-90}>
                               <el-menu-item onclick={() => {
                                   routerLinkTo("/mine")
                               }} index="/mine">个人中心
                               </el-menu-item>
                               <el-menu-item onClick={exitLogin} index={'/logout'}
                               >退出登陆
                               </el-menu-item
                               >
                           </el-sub-menu>
                       </el-menu>
                   </div>
                </div>

            </>
        }
    }
})